<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会员页面</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/csspuls/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/common.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/icon/iconfont.css" />
    <style>
        .body{
            min-width: 1366px;
        }
        .app-main{
            height: calc(100% - 64px);
        }
        .app-main .divTmp{
            width: 100%;
            height: 100%;
        }
        .item {
            margin-top: 5px;
            margin-right: 40px;
        }
        .login-in{
            text-align: center;
            background-color: rgb(52, 55, 68);
            /* height: 100px;
            line-height: 100px;
            padding: 12px 5px; */
            padding: 15px 20px 15px 18px;
        }
    </style>


<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
            <div class="login-in">
                <p style="color:white;font-size:20px">健身房管理系统</p>
                <!-- <img src="images/logo.png" width="122.5" alt="" /> -->
<%--                <img src="${pageContext.request.contextPath}/statics/images/sss.png" alt="" style="width: 117px; height: 32px" />--%>
            </div>

            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        :default-active="defAct"
                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="#343744"
                        text-color="#bfcbd9"
                        active-text-color="#f4f4f5"
                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                            <template slot="title">
                                <i class="iconfont" :class="item.icon"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item
                                    v-for="sub in item.children"
                                    :index="sub.id"
                                    :key="sub.id"
                                    @click="menuHandle(sub,false)"
                            >
                                <i :class="iconfont" :class="sub.icon"></i>
                                <span slot="title">{{sub.name}}</span>
                            </el-menu-item
                            >
                        </el-submenu>
                        <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                            <i class="iconfont" :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <!-- <navbar /> -->
            <div class="navbar" >
                <div class="head-lable">

                    <span>{{headTitle}}</span>
                </div>
                <div class="right-menu">
                    <div class="avatar-wrapper">${userInfo.username}</div>
                    &nbsp;&nbsp;
                    <el-dropdown @command="handleCommand" >
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="logout" >退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </div>
            <div class="app-main" v-loading="loading" style="background-image:url(${pageContext.request.contextPath}/statics/img/7.jpg)">
                <div class="divTmp" v-show="loading"></div>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script>


    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '1',
                menuActived: '1',
                userInfo: {},
                menuList: [
                    {
                        id: '1',
                        name: '我的信息',
                        url: '${pageContext.request.contextPath}/system/jumpUserInfoIndex',
                        icon: 'icon-user'
                    },
                    {
                        id: '2',
                        name: '课程列表',
                        url: '${pageContext.request.contextPath}/system/jumpBookIndex',
                        icon: 'icon-category'
                    },
                    {
                        id: '3',
                        name: '选择教练',
                        url: '${pageContext.request.contextPath}/system/jumpCoachIndex',
                        icon: 'icon-member'
                    }
                ],
                topicNumber:'',
                iframeUrl: '${pageContext.request.contextPath}/system/jumpUserInfoIndex',
                headTitle: '个人信息',
                goBackFlag: false,
                loading: true,
                timer: null
            }
        },
        computed: {},
        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.$notify({title: '欢迎', message: '欢迎访问！', type: 'success'});
            this.closeLoading()
        },
        beforeDestroy() {
            this.timer = null
            clearTimeout(this.timer)
        },
        mounted() {
            window.menuHandle = this.menuHandle;
        },
        methods: {
            // 退出
            handleCommand(command) {
                axios.get("${pageContext.request.contextPath}/logout").then(resp =>{
                    localStorage.removeItem('userInfo');//清理本地存储的用户信息
                   window.location.href = '${pageContext.request.contextPath}/logoutIndex'//跳转登录页面
                })
            },
            goBack() {
                // window.location.href = 'javascript:history.go(-1)'
                const menu = this.menuList.find(item=>item.id===this.menuActived)
                // this.goBackFlag = false
                // this.headTitle = menu.name
                this.menuHandle(menu,false)
            },
            menuHandle(item, goBackFlag) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                this.headTitle = item.name
                this.goBackFlag = goBackFlag
                this.closeLoading()
            },
            closeLoading(){
                this.timer = null
                this.timer = setTimeout(()=>{
                    this.loading = false
                },1000)
            },


        }
    })



</script>
</body>
</html>
